<template>
  <div class="modulesTitle-container" :class="device == 'mobile' ? 'mobile-titleContainer': !sidebar.opened ? 'no-left-sidebar':''">
    <div class="title-left">
      <div v-if="noBread">
        <span><i class="left-icon el-icon-s-flag" /></span>
        <p class="title-content">{{ titleName }}</p>
      </div>

      <meta-breadcrumb v-else :title-name="titleName" />
    </div>
    <div class="title-right">
      <div class="other">
        <slot name="other" />
      </div>
      <div class="btn">
        <slot name="btn" />
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    titleName: {
      type: String,
      default: '标题名称'
    },
    noBread: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "../../assets/scss/components/modulesTitle.scss";
</style>
